<template>
  <div>
    <el-table :data="mes" border style="width: 100%" :cell-style="styleBack">
      <el-table-column fixed prop="name" label="名字" width="150">
      </el-table-column>
      <el-table-column prop="wendu" label="温度" width="120"> </el-table-column>
      <el-table-column prop="min" label="最小温度" width="120">
      </el-table-column>
      <el-table-column prop="max" label="最大温度" width="120">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mes: [],
      ws: "",
    };
  },
  methods: {
    styleBack({ row, column, rowIndex, columnIndex }) {
      if (row.status == 0) {
        return { backgroundColor: "#0c87ef" };
      }
    },
    initWebsocket() {
      this.ws = new WebSocket("ws://localhost:8000/websocket?id=2");
      this.ws.onopen = function () {
        alert("success");
      };
      this.ws.onmessage = (data) => {
        console.log(data.data);
        this.mes = JSON.parse(data.data);
      };

      this.ws.onclose = function () {
        alert("close");
      };
    },
  },
  mounted() {
    this.initWebsocket();
  },
  computed: {
    calssobje() {
      return (status) => {
        console.log(status);
        if (status === 0) {
          return { color: red };
        }
      };
    },
  },
};
</script>

<style>
</style>
